<template>
    <div>
        <p>动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。</p>
        <div class="main" ref="main"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts"

    export default {
        name: "BarView3",
        data(){
            return {
                myChart :null,
                option :{
                    xAxis : {
                        max : "dataMax",  // 用数据的最大值作为 X 轴最大值，视觉效果更好
                        name : "",
                        axisLabmel: {
                                foratter: '${value}'
                        }
                    },
                    yAxis : {
                        type : "category",
                        data: ['中国','美国','俄罗斯','英国','德国'],
                        inverse : true,  // 表示 Y 轴从下往上是从小到大的排列
                        // animationDuration: 300,
                        // animationDurationUpdate: 300,
                        // max : 3  // 仅仅显示最新的3条数据（控制排名前几的）
                    },
                    series : [
                        {
                            name: '人均GDP',
                            type :"bar",
                            data : [],
                            realtimeSort: true,  // Echarts5 开启该系列的动态排序效果
                            label: {  // 柱状图的标签
                                show: true,
                                position: 'right',
                                valueAnimation: true  // value值的变化是否开启动态变化
                            }
                        }
                    ],
                    legend :{
                        show : true
                    },
                    animationDuration: 2000,
                    animationDurationUpdate: 2000,
                    animationEasing: 'linear',
                    animationEasingUpdate: 'linear'
                },
                timeId :null,
                colors : ['#b51f1d','#7b24c5','#3c7fc8','#93c278','#c5b14b'],
                year : 2018
            }
        },
        created(){
            for (let i = 0; i < 5 ; i++) {
                this.option.series[0].data.push({  // 模拟高级数据（定制每个条不同的颜色）
                    value :  Math.round(Math.random() *200),
                    itemStyle : {
                        color : this.colors[i]
                    }
                });
                this.option.xAxis.name = `${this.year} 年`
            }
        },
        mounted(){
            this.myChart = echarts.init(this.$refs.main);
            this.myChart.setOption(this.option)

            let now = new Date();
            this.timeId = setInterval(()=>{
                if(this.year >= now.getFullYear()){
                    clearInterval(this.timeId);
                    return;
                }
                this.updateData();
            }, 2000)
        },
        beforeDestroy(){
            if(this.timeId){
                clearInterval(this.timeId)
            }
        },
        methods :{
            updateData(){
                let data = this.option.series[0].data;
                for (let i = 0; i < data.length; ++i) {
                    if (Math.random() > 0.9) {
                        data[i].value += Math.round(Math.random() * 2000);
                    } else {
                        data[i].value += Math.round(Math.random() * 200);
                    }
                }
                this.option.xAxis.name = `${++this.year} 年`
                this.myChart.setOption(this.option)
            }
        }
    }
</script>

<style scoped>
    .main {
        width: 60vw;
        height: 550px;
        box-shadow: 1px 1px 10px #333;
        margin: 20px auto;
    }
</style>